<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>vue自定义事件</title>
    <script src="./vue.js"></script>
</head>

<body>
    <div id="app">
        <container>
            <x-head slot="hh-title" v-bind:title="a"></x-head>
            <c-foot slot="foo-title" v-for="(item,index) in names" v-bind:item="item" v-bind:index="index"
                v-on:remove="removeE"></c-foot>
        </container>


    </div>

</body>
<script>
    Vue.component("container", {
        template: '<div><slot name="hh-title"></slot><ul><slot name="foo-title" ></slot></ul></div>'
    })
    Vue.component("x-head", {
        props: ["title" ],
        template: '<div>{{title}}</div>'
    })
    Vue.component("c-foot", {
        props: ["item", "index"],
        template: "<li>{{index}}'----'{{item}}<button @click='removef'>删除</button></li>",
        methods: {
            removef: function () {
                this.$emit("remove");
            }
        }
    })
    var vm = new Vue({
        el: '#app',
        data: {
            a: 'hello!',
            names: ["skyem", "jack", "love"]



        },
        methods: {
            removeE: function (index) {
                this.names.splice(index, 1);

            }
        }




        //     created: function () {
        // // `this` 指向 vm 实例
        // console.log('a is: ' + this.a)
        //   } ,
        //      beforeUpdate(){

        //       console.log('有数据更新')},
        //       updated(){
        //         console.log('更新完毕')},

        //     beforeMount(){
        //         console.log('挂载前')
        //     },
        //     mounted(){
        //         setTimeout(()=>{
        //             this.a='change!';
        //         },2000)


        //     }	

    })
</script>

</html>